<template>
  <div class="cart">
    <NavBar />
    <h1>购物车</h1>
    <el-table :data="cartItems" style="width: 100%">
      <el-table-column prop="image" label="图片" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.image" class="cake-image" alt="Cake Image"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="quantity" label="数量">
        <template slot-scope="scope">
          <div class="quantity-buttons">
            <el-button @click="decreaseQuantity(scope.row)" type="primary" circle size="mini" icon="el-icon-minus"></el-button>
            <span style="margin: 0 10px;">{{ scope.row.quantity }}</span>
            <el-button @click="increaseQuantity(scope.row)" type="primary" circle size="mini" icon="el-icon-plus"></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="removeFromCart(scope.row.id)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="cartItems.length > 0" class="cart-actions">
      <h2>总计: {{ totalPrice }}元</h2>
      <div class="action-buttons">
        <el-button type="primary" @click="checkout">结账</el-button>
        <el-button type="primary" @click="clearCart">清空购物车</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from './NavBar.vue';

export default {
  name: 'Cart',
  components: {
    NavBar
  },
  data() {
    return {
      cartItems: JSON.parse(localStorage.getItem('cart')) || []
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    }
  },
  methods: {
    clearCart() {
      localStorage.setItem('cart', '[]');
      this.cartItems = [];
    },
    increaseQuantity(item) {
      if (item.quantity < 100) {
        item.quantity++;
        localStorage.setItem('cart', JSON.stringify(this.cartItems));
      }
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) {
        item.quantity--;
        localStorage.setItem('cart', JSON.stringify(this.cartItems));
      } else {
        this.removeFromCart(item.id);
      }
    },
    removeFromCart(id) {
      const cart = JSON.parse(localStorage.getItem('cart')) || [];
      const index = cart.findIndex(item => item.id === id);
      if (index !== -1) {
        cart.splice(index, 1);
        localStorage.setItem('cart', JSON.stringify(cart));
        this.cartItems = cart;
      }
    },
    checkout() {
      const order = {
        id: Date.now(),
        date: Date.now(),
        items: this.cartItems.map(item => ({ ...item, quantity: item.quantity })),
        totalPrice: this.totalPrice,
        userID: localStorage.getItem('user')
      };
      const orders = JSON.parse(localStorage.getItem('orders')) || [];
      orders.push(order);
      localStorage.setItem('orders', JSON.stringify(orders));

      const userOrders = JSON.parse(localStorage.getItem('orders_' + order.userID)) || [];
      userOrders.push(order);
      localStorage.setItem('orders_' + order.userID, JSON.stringify(userOrders));

      localStorage.setItem('cart', '[]');
      this.cartItems = [];
    }
  },
  created() {
    if (!localStorage.getItem('user')) {
      this.$router.push('/login');
    }
  }
};
</script>
<style scoped>
.cart h1 {
  text-align: center;
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.cake-image {
  width: 80px; /* 缩小图片宽度 */
  height: 80px; /* 缩小图片高度 */
  border-radius: 4px;
}

.quantity-buttons {
  display: flex;
  align-items: center;
}

.quantity-buttons .el-button {
  margin: 0 5px;
}

.cart-actions {
  position: relative;
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-actions h2 {
  text-align: center;
  margin-bottom: 20px;
}

.action-buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 10px;
}

.el-button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.el-button:hover {
  background-color: #409eff;
  transform: scale(1.05);
}
</style>